<template>
	<view class="volunteer-container">
		<!-- 背景图片 -->
		<image class="bg-image" src="/static/zzph_HomePage.png" mode="aspectFill"></image>
		
		<!-- 主内容区域 -->
		<view class="main-content">
			<!-- 搜索栏 -->
			<view class="search-section">
				<view class="search-bar">
					<input class="search-input" placeholder="请输入搜索内容" />
					<image class="search-icon" src="/static/搜索.svg"></image>
				</view>
			</view>
			
			<!-- 功能盒子 -->
			<view class="function-box">
				<view class="function-item">
					<image class="function-image" src="/static/HomePage_InProgressOrder_1.png"></image>
					<text class="function-text">进行中订单</text>
				</view>
				<view class="divider"></view>
				<view class="function-item">
					<image class="function-image" src="/static/HomePage_NewOrderSquare.png"></image>
					<text class="function-text">订单广场</text>
				</view>
			</view>
			
			<!-- 通知盒子 -->
			<view class="notice-box">
				<image class="notice-icon" src="/static/Homepage_NoticeHorn.png"></image>
				<view class="notice-content">
					<view class="notice-scroll">
						<text class="notice-text">{{ noticeText }}                    {{ noticeText }}</text>
					</view>
				</view>
			</view>
			
			<!-- 模块盒子区域 -->
			<view class="modules-section">
				<view class="modules-row">
					<view class="module-item">
						<image class="module-icon" src="/static/Homepage_UserBookAndHelp_1.png"></image>
						<text class="module-text">用户手册</text>
					</view>
					<view class="module-item">
						<image class="module-icon" src="/static/Homepage_Service.png"></image>
						<text class="module-text">服务</text>
					</view>
					<view class="module-item">
						<image class="module-icon" src="/static/Homepage_HistoryOrders.png"></image>
						<text class="module-text">历史订单</text>
					</view>
				</view>
				<view class="modules-row">
					<view class="module-item">
						<image class="module-icon" src="/static/HomePage_QualificationVerification.png"></image>
						<text class="module-text">资质认证</text>
					</view>
					<view class="module-item">
						<image class="module-icon" src="/static/Homepage_AboutUs.png"></image>
						<text class="module-text">关于我们</text>
					</view>
					<view class="module-item empty">
						<text class="module-text">待开发</text>
					</view>
				</view>
			</view>
			<!-- 轮播图区域 -->
			<view class="carousel-section">
				<swiper class="carousel-swiper" indicator-dots="true" autoplay="true" interval="3000" circular="true">
					<swiper-item>
						<image class="carousel-image" src="/static/Homepage_Service.png" mode="aspectFill"></image>
					</swiper-item>
					<swiper-item>
						<image class="carousel-image" src="/static/Homepage_HistoryOrders.png" mode="aspectFill"></image>
					</swiper-item>
					<swiper-item>
						<image class="carousel-image" src="/static/Homepage_AboutUs.png" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		
		<!-- 底部导航栏 -->
		<view class="bottom-nav">
			<view class="nav-item" :class="{ active: currentTab === 'home' }" @click="switchTab('home')">
				<image class="nav-icon" src="/static/Bottom_Home_1.png"></image>
				<text class="nav-text">首页</text>
			</view>
			<view class="nav-item" :class="{ active: currentTab === 'message' }" @click="switchTab('message')">
				<image class="nav-icon" src="/static/Bottom_Chat.png"></image>
				<text class="nav-text">消息</text>
			</view>
			<view class="nav-item" :class="{ active: currentTab === 'mine' }" @click="switchTab('mine')">
				<image class="nav-icon" src="/static/Bottom_Mine.png"></image>
				<text class="nav-text">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 'home',
				noticeText: '欢迎使用晨夕相伴小程序，这里有贴心的服务等着您！                   新用户注册即可获得优惠券，快来体验吧！                   志愿者服务时间：周一至周日 8:00-20:00                   如有问题请及时联系客服，我们会尽快为您解决！'
			}
		},
		onLoad() {
			
		},
		methods: {
			switchTab(tab) {
				this.currentTab = tab;
				
				// 根据tab切换内容
				switch(tab) {
					case 'home':
						uni.switchTab({ url: '/pages/volunteer/index' });
						break;
					case 'message':
						// 这里可跳转到消息页面（如有）
						break;
					case 'mine':
						uni.navigateTo({ url: '/pages/volunteer/mine' });
						break;
				}
			}
		}
	}
</script>

<style>
	.volunteer-container {
		min-height: 100vh;
		position: relative;
		display: flex;
		flex-direction: column;
	}
	
	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	
	.main-content {
		position: relative;
		z-index: 2;
		flex: 1;
		padding: 40rpx;
		padding-bottom: 120rpx;
	}
	
	.welcome-section {
		text-align: center;
		margin-bottom: 60rpx;
		padding-top: 60rpx;
	}
	
	.welcome-title {
		display: block;
		font-size: 40rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}
	
	.welcome-subtitle {
		display: block;
		font-size: 28rpx;
		color: #666666;
	}
	
	.bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: rgb(171, 210, 167);
		display: flex;
		border-top: 1rpx solid #e5e5e5;
		z-index: 999;
	}
	
	.nav-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10rpx;
	}
	
	.nav-icon {
		width: 60rpx;
		height: 70rpx;
		margin-bottom: 8rpx;
	}
	
	.nav-text {
		font-size: 24rpx;
		color: #666666;
	}
	
	.nav-item.active .nav-text {
		color: #007aff;
	}
	
	/* 首页图片区域 */
	.homepage-image-section {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40rpx 20rpx;
	}
	
	.homepage-image {
		width: 100%;
		height: 400rpx;
		border-radius: 20rpx;
	}
	
	/* 搜索栏样式 */
	.search-section {
		margin-top: 258rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.search-bar {
		width: 500rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
	}
	
	.search-input {
		flex: 1;
		height: 60rpx;
		font-size: 28rpx;
		color: #333333;
		background: transparent;
		border: none;
		outline: none;
	}
	
	.search-icon {
		width: 24rpx;
		height: 24rpx;
		margin-left: 10rpx;
	}
	
	/* 功能盒子样式 */
	.function-box {
		background-color: white;
		border-radius: 20rpx;
		padding: 40rpx;
		margin: 40rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 80rpx;
	}
	
	.function-item {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 20rpx;
	}
	
	.function-image {
		width: 120rpx;
		height: 160rpx;
		border-radius: 10rpx;
	}
	
	.divider {
		width: 1rpx;
		height: 100rpx;
		background: #e5e5e5;
	}
	
	.function-text {
		font-size: 32rpx;
		color: #75af74;
		font-weight: 500;
	}
	
	/* 通知盒子样式 */
	.notice-box {
		background-color: white;
		border-radius: 20rpx;
		padding: 20rpx 40rpx;
		margin: 40rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 40rpx;
	}
	
	.notice-icon {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}
	
	.notice-content {
		flex: 1;
		overflow: hidden;
	}
	
	.notice-scroll {
		overflow: hidden;
		height: 40rpx;
		position: relative;
	}
	
	.notice-text {
		font-size: 28rpx;
		color: #666666;
		display: inline-block;
		white-space: nowrap;
		animation: scroll 30s linear infinite;
		position: absolute;
		left: 0;
		top: 0;
	}
	
	@keyframes scroll {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(-50%);
		}
	}
	
	/* 模块盒子区域样式 */
	.modules-section {
		margin-top: 12rpx;
		padding: 0;
		background: none;
		box-shadow: none;
	}
	
	.modules-row {
		display: flex;
		flex-direction: row;
		gap: 20rpx;
		margin-bottom: 20rpx;
		justify-content: center;
	}
	
	.module-item {
		width: 180rpx;
		min-width: 0;
		max-width: 180rpx;
		flex: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8rpx;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.06);
		padding: 16rpx 0 12rpx 0;
	}
	
	.module-icon {
		width: 68rpx;
		height: 68rpx;
		margin-bottom: 6rpx;
	}
	
	.module-text {
		font-size: 24rpx;
	}
	
	.empty {
		opacity: 0.5;
	}
	
	/* 轮播图区域样式 */
	.carousel-section {
		margin-top: 40rpx;
		padding: 0;
		background: none;
		box-shadow: none;
	}
	
	.carousel-swiper {
		width: 100%;
		height: 400rpx;
		border-radius: 20rpx;
	}
	
	.carousel-image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}
</style> 